<template>
  <view>
    <view class="cell" @tap.stop="tapCell">
      <image class="cell-icon" :src="icon"></image>
      <view class="cell-title">{{ value.name }}</view>
      <view v-if="value.value" class="cell-subTitle">{{ value.value }}</view>
      <view class="cell-badge" v-if="value.badge">
        <up-badge
          type="error"
          max="99"
          bgColor="#F10000"
          color="#FFFFFF"
          :value="value.badge"
        ></up-badge>
      </view>

      <image
        v-if="isShowArrow"
        class="cell-arrow"
        :class="{ 'cell-subArrow': value.value || value.badge }"
        src="/static/images/common/cell_arrow.png"
      ></image>
    </view>
    <!-- <kk-line v-if="isShowLine"></kk-line> -->
    <FollowWxAccountDialog :show="show" @close="show = false" />
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import FollowWxAccountDialog from "@/pages/index/components/followWxAccountDialog.vue";

const props = defineProps({
  value: {
    type: Object,
    default: () => {},
  },
  isShowArrow: {
    type: Boolean,
    default: true,
  },
  isShowLine: {
    type: Boolean,
    default: true,
  },
});

const show = ref(false);

const icon = computed(() => {
  return `/static/images/mine/${props.value.icon}.png`;
});
const tapCell = () => {
  if (props.value.url) {
    if (props.value.url === "followOfficialAccount") {
      // 关注公众号
      uni.hideTabBar();
      show.value = true;
      return;
    }
    uni.navigateTo({
      url: props.value.url,
    });
  }
};
</script>

<style lang="scss" scoped>
.cell {
  height: 108rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;
  background: transparent;
  &-icon {
    width: 24px;
    height: 24px;
  }
  &-title {
    margin-left: 16rpx;
    height: 40rpx;
    font-size: 30rpx;
    color: #333;
    line-height: 40rpx;
  }

  &-subTitle {
    margin-left: auto;
    font-size: 22rpx;
    color: #999999;
    line-height: 28rpx;
  }
  &-badge {
    margin-left: auto;
  }

  &-arrow {
    margin-left: auto;
    // margin-left: 4rpx;
    width: 28rpx;
    height: 28rpx;
  }
  &-subArrow {
    margin-left: 12rpx;
  }
}
</style>
